<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
	<head>
		<title>wildflat Website Template | Home :: w3layouts</title>
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
		<!----webfonts---->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
		<!----//webfonts---->
		<!---script---->
		<script src="js/jquery.min.js"></script>
		<!---//script---->
		<!-----768px-menu----->
		<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css" />
		<script type="text/javascript" src="js/jquery.mmenu.js"></script>
			<script type="text/javascript">
				//	The menu on the left
				$(function() {
					$('nav#menu-left').mmenu();
				});
		</script>
		<!-----//768px-menu----->
		 <!---strat-slider---->
	    <link rel="stylesheet" type="text/css" href="css/style2.css" />
		<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
		<!---//strat-slider---->
	</head>
	<body>
		<!----start-wrap---->
		<!------start-768px-menu---->
			<div id="page">
					<div id="header">
						<a class="navicon" href="#menu-left"> </a>
					</div>
					<nav id="menu-left">
						<ul>
							<li class="active"><a href="#work">Work</a></li>
							<li><a href="#about">About</a></li>
							<li><a href="#services">Services</a></li>
							<li><a href="#news">News</a></li>
							<li><a href="#contact">Contact</a></li>
							<li><a href="blog.html">Blog</a></li>
						</ul>
					</nav>
			</div>
		<!------start-768px-menu---->
			<!----start-header---->
			<div class="header" id="move-top">
				<div class="wrap">
				<div class="header-left">
					<!----start-logo---->
					<div class="logo">
						<a href="index.html"><img src="images/logo.png" title="wildflat" /> </a>
					</div>
					<!----//End-logo---->
				</div>
				<div class="header-right">
					<!----start-top-nav---->
					<div class="top-nav">
						<ul>
							<li class="active"><a href="#work">Work</a></li>
							<li><a href="#about">About</a></li>
							<li><a href="#services">Services</a></li>
							<li><a href="#news">News</a></li>
							<li><a href="#contact">Contact</a></li>
							<li><a href="blog.html">Blog</a></li>
						</ul>
					</div>
					<!----//End-top-nav---->
					<!----start-search-box--->
					<div class="search">
						<div class="search-box">
							<div id="sb-search" class="sb-search">
								<form>
									<input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
									<input class="sb-search-submit" type="submit" value="">
									<span class="sb-icon-search"> </span>
								</form>
							</div>
						</div>
						<!----search-scripts---->
						<script src="js/modernizr.custom.js"></script>
						<script src="js/classie.js"></script>
						<script src="js/uisearch.js"></script>
						<script>
							new UISearch( document.getElementById( 'sb-search' ) );
						</script>
						<!----//search-scripts---->
					</div>
					</div>
					<!----//End-search-box--->
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<!----//End-header---->
			<!---- start-slider---->
			<div class="slider">
				<!--End-top-nav---->
				<!---start-da-slider----->
				<div id="da-slider" class="da-slider">
				<div class="da-slide">
					<label><span> </span></label>
					<h2>ONLY BOLD AND CLEAN IDEAS</h2>
					<p>FOR OUR CLIENTS WITH LOVE</p>
					<i><a href="#"> </a></i>
					<small><a href="#">scroll to see the entire site</a></small>
				</div>
				<div class="da-slide">
					<label><span> </span></label>
					<h2>ONLY BOLD AND CLEAN IDEAS</h2>
					<p>FOR OUR CLIENTS WITH LOVE</p>
					<i><a href="#"> </a></i>
					<small><a href="#">scroll to see the entire site</a></small>
				</div>
				<div class="da-slide">
					<label><span> </span></label>
					<h2>ONLY BOLD AND CLEAN IDEAS</h2>
					<p>FOR OUR CLIENTS WITH LOVE</p>
					<i><a href="#"> </a></i>
					<small><a href="#">scroll to see the entire site</a></small>
				</div>
				<nav class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</nav>
			</div>
			<script type="text/javascript" src="js/jquery.cslider.js"></script>
			<script type="text/javascript">
				$(function() {
				
					$('#da-slider').cslider({
						autoplay	: true,
						bgincrement	: 450
					});
				
				});
			</script>
				<!---//End-da-slider----->
			</div>
			<!---- //End-slider---->
			<!---start-works---->
			<!---image-hover-effects---->
			 <script src="js/hover.zoom.js"></script>
						  <script>
					        $(function() {
					            $('.pink').hoverZoom({
					                overlay: true, // false to turn off (default true)
					                overlayColor: '#51A3C8', // overlay background color
					                overlayOpacity: 0.7, // overlay opacity
					                zoom: 0, // amount to zoom (px)
					                speed: 300 // speed of the hover
					            });
					            
					            
					        }); 
			    		</script>
		<!---//image-hover-effects---->
			<div class="works" id="work">
				<div class="wrap">
					<div class="head">
						<span> </span>
						<h3>WILDFLAT works</h3>
					</div>
					<!---start-mfp ---->	
			<div id="small-dialog1" class="mfp-hide">
				<div class="pop_up">
					<h2>Yours text place Here</h2>
					<p class="para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
				</div>
			</div>
			<!---end-mfp ---->
				<div class="gallery">
					<div class="container">
					<ul id="filters" class="clearfix">
						<li><span class="filter" data-filter="app web">Web design</span></li>
						<li><span class="filter" data-filter="icon web card">LOGOTYPES</span></li>
						<li><span class="filter" data-filter="web app icon card">PRINT</span></li>
						<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
					</ul>
						<div id="portfoliolist" style="     ">
						<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
							<div class="portfolio-wrapper">				
								<a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
									<img src="images/p1.jpg" alt="Image 2" style="top: 0px;">
								</a>
							</div>
						</div>				
						<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
							<div class="portfolio-wrapper">			
								<a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
									<img src="images/p2.jpg" alt="Image 2" style="top: 0px;">
								</a>
							</div>
						</div>		
						<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
							<div class="portfolio-wrapper">						
								<a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
									<img src="images/p3.jpg" alt="Image 2" style="top: 0px;">
								</a>
							</div>
						</div>				
						<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
							<div class="portfolio-wrapper">			
								<a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
									<img src="images/p4.jpg" alt="Image 2" style="top: 0px;">
								</a>
							</div>
						</div>	
									
						<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
							<div class="portfolio-wrapper">
								<a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
									<img src="images/p5.jpg" alt="Image 2" style="top: 0px;">
								</a>
							</div>
						</div>			
						
						<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
							<div class="portfolio-wrapper">			
								<a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
									<img src="images/p6.jpg" alt="Image 2" style="top: 0px;">
								</a>
							</div>
						</div>	
						<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
							<div class="portfolio-wrapper">
								<a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
									<img src="images/p7.jpg" alt="Image 2" style="top: 0px;">
								</a>
							</div>
						</div>			
						
						<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
							<div class="portfolio-wrapper">			
								<a class="popup-with-zoom-anim zoom pink" href="#small-dialog1">
									<img src="images/p8.jpg" alt="Image 2" style="top: 0px;">
								</a>
							</div>
						</div>	
					</div>
				</div><!-- container -->
				<div class="clear"> </div>
				<!---start-gallery-script----->
					<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
					<script type="text/javascript">
					$(function () {
						var filterList = {
							init: function () {
								// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',	
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});				
							},
							hoverEffect: function () {
							}
						};
						// Run the show!
						filterList.init();
					});	
					</script>
					<!-- Add fancyBox main JS and CSS files -->
					<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
					<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
							<script>
								$(document).ready(function() {
									$('.popup-with-zoom-anim').magnificPopup({
										type: 'inline',
										fixedContentPos: false,
										fixedBgPos: true,
										overflowY: 'auto',
										closeBtnInside: true,
										preloader: false,
										midClick: true,
										removalDelay: 300,
										mainClass: 'my-mfp-zoom-in'
								});
							});
							</script>
				<!---//End-gallery-script----->
				<div class="clear"> </div>
				</div>
			</div>
			<div class="works-bg">
				
			</div>
			</div>
			</div>
				</div>
			</div>
			<!---//End-works---->
			<!----start-about---->
			<div class="about" id="about">
				<div class="wrap">
					<div class="head">
						<span> </span>
						<h3>About WILDFLAT</h3>
					</div>
					<div class="about-grids">
						<div class="about-grid">
							<h3>TEAM</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet scelerisque orci. Donec molestie magna tincidunt lectus ornare, gravida molestie.</p>
						</div>
						<div class="about-grid">
							<h3>CLIENTS</h3>
							<p>Vivamus iaculis urna id dictum tempor. Praesent gravida ante nec imperdiet dignissim. Donec lacinia eget mi eu convallis. lacinia laoreet nulla.</p>
						</div>
						<div class="about-grid">
							<h3>WORK</h3>
							<p>Donec suscipit dolor lectus, in eleifend nunc blandit et. Mauris quis lacus eu est fringilla condimentum vitae vel purus. Nunc cursus nisi nec adipiscing ornare. </p>
						</div>
						<div class="clear"> </div>
					</div>
					<div class="clear"> </div>
				</div>
			</div>
			<!----//End-about---->
			<!----start-services---->
			<div class="services" id="services">
				<div class="wrap">
					<div class="head">
						<span> </span>
						<h3>WildFlat Services</h3>
					</div>
					<div class="services-grids">
						<div class="services-grid">
							<div class="services-grid-left">
								<span class="s-icon1"> </span>
							</div>
							<div class="services-grid-right">
								<h4>WEB DESIGN</h4>
								<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn.</p>
							</div>
						</div>
						<div class="services-grid">
							<div class="services-grid-left">
								<span class="s-icon2"> </span>
							</div>
							<div class="services-grid-right">
								<h4>Logotypes</h4>
								<p>Curabitur mollis dapibus felis, eget rhoncus lorem. Praesent faucibus euismod varius. Maecenas luctus dui est, nec placerat purus tempus eu. Nullam id adipiscing ipsum. Integer sed erat quis est commodo varius et in tellus. </p>
							</div>
						</div>
						<div class="services-grid">
							<div class="services-grid-left">
								<span class="s-icon3"> </span>
							</div>
							<div class="services-grid-right">
								<h4>UI design</h4>
								<p>Quisque non ornare nisi. Nam vel nulla euismod ipsum euismod faucibus ac vel magna. Integer hendrerit tellus eget lorem interdum ultrices. Aliquam gravida luctus lacus, in adipiscing massa egestas eu. Proin porta non lectus ac pellentesque. </p>
							</div>
						</div>
						<div class="services-grid">
							<div class="services-grid-left">
								<span class="s-icon4"> </span>
							</div>
							<div class="services-grid-right">
								<h4>Video</h4>
								<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa. flow freely, we've created a studio where we can not only work but also have fun and learn.</p>
							</div>
						</div>
						<div class="clear"> </div>
					</div>
				</div>
				<div class="services-bg">
				
				</div>
			</div>
			<!----//End-services---->
			<!---start-purches-it---->
			<div class="purches-it">
				<h5>Like?</h5>
				<a href="shortcodes.html">PURCHAISE IT NOW</a>
			</div>
			<!---//End-purches-it---->
			<!--- start-latest-news---->
			<div class="latest-news" id="news">
				<div class="wrap">
					<div class="head">
						<span> </span>
						<h3>LAtest NEWS</h3>
					</div>
					<!----news-grid-scroller---->
					<script type="text/javascript" src="js/jquery.flexisel.js"></script>
					<script type="text/javascript">
					$(window).load(function() {
					    $("#flexiselDemo3").flexisel({
					        visibleItems: 3,
					        animationSpeed: 1000,
					        autoPlay: true,
					        autoPlaySpeed: 3000,            
					        pauseOnHover: true,
					        enableResponsiveBreakpoints: true,
					        responsiveBreakpoints: { 
					            portrait: { 
					                changePoint:480,
					                visibleItems: 1
					            }, 
					            landscape: { 
					                changePoint:640,
					                visibleItems: 2
					            },
					            tablet: { 
					                changePoint:768,
					                visibleItems: 3
					            }
					        }
					    });
					});
					</script>
					<ul id="flexiselDemo3">
					    <li>
					    	<div class="latest-news-grid">
					    		<h3>19/<span>09</span></h3>
					    		<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa.</p>
					    	</div>
					    </li>
					    <li>
					    	<div class="latest-news-grid">
					    		<h3>12/<span>09</span></h3>
					    		<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa.</p>
					    	</div>
					    </li>
					    <li>
					    	<div class="latest-news-grid">
					    		<h3>23/<span>08</span></h3>
					    		<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa.</p>
					    	</div>
					    </li>
					    <li>
					    	<div class="latest-news-grid">
					    		<h3>10/<span>08</span></h3>
					    		<p>Bacon ipsum dolor sit amet shank tri-tip pig, short loin pork belly boudin ground round flank sirloin bresaola filet mignon sausage beef ribs kielbasa.</p>
					    	</div>
					    </li>
					</ul>  
					<div class="clear"> </div>
					<!----//news-grid-scroller---->
					<!----latest-news-bottom-border---->
					<div class="bottom-border">
						<span> </span>
					</div>
					<!----//latest-news-bottom-border---->
				</div>
			</div>
			<!--- //End-latest-news---->
			<!----start-contact---->
			<div class="contact" id="contact">
				<div class="wrap">
					<div class="contact-left">
						<div class="contact-head">
								<span> </span>
								<h3>Contact US</h3>
						</div>
						<form>
							<div class="form-left">
								<input type="text" placeholder="Name" required />
								<input type="text" placeholder="Email" required />
								<input type="text" placeholder="Phone" required />
							</div>
							<div class="form-right">
								<textarea rows="2" cols="70" onfocus="if(this.value == 'Comment') this.value='';" onblur="if(this.value == '') this.value='Comment';" >Comment</textarea>
							</div>
							<div class="clear"> </div>
							<input type="submit" value="Send latter" />
							<div class="clear"> </div>
						</form>
					</div>
					<div class="contact-right">
						<div class="contact-head">
								<span> </span>
								<h3>FLICKR STREAM</h3>
						</div>
						<div class="flicker-grids">
							<ul>
								<li><a href="#"><img src="images/f1.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f2.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f3.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f4.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f5.jpg" alt="" /></a></li>
								<li><a href="#"><img src="images/f6.jpg" alt="" /></a></li>
							</ul>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
			</div>
			<!----//End-contact---->
			<!---- start-footer---->
			<div class="footer">
				<div class="wrap"> 
				<div class="footer-left">
					<h2>FANKS FOR WATCHING, <span>I hope you enjoyed it</span></h2>
				</div>
				<div class="footer-right">
					<ul>
						<li><a class="youtube" href="#"><span> </span></a></li>
						<li><a class="skye" href="#"><span> </span></a></li>
						<li><a class="flicker" href="#"><span> </span></a></li>
						<li><a class="rss" href="#"><span> </span></a></li>
						<li><a class="twitter" href="#"><span> </span></a></li>
						<li><a class="dribbble" href="#"><span> </span></a></li>
						<div class="clear"> </div>
					</ul>
				</div>
				<div class="clear"> </div>
				</div>
			</div>
			<!---- //End-footer---->
			<!----start-copy-right---->
			<div class="copy-right">
				<div class="wrap">
					<p>Template by <a href="http://w3layouts.com/">W3layouts</a></p>
					<!---scrolling---->
					<script type="text/javascript" src="js/move-top.js"></script>
					<script type="text/javascript">
							$(function() {
							  $('a[href*=#]:not([href=#])').click(function() {
							    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
						
							      var target = $(this.hash);
							      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
							      if (target.length) {
							        $('html,body').animate({
							          scrollTop: target.offset().top
							        }, 1000);
							        return false;
							      }
							    }
							  });
							});
					</script>
					<!---//scrolling---->
					<script type="text/javascript">
							$(document).ready(function() {
								/*
								var defaults = {
						  			containerID: 'toTop', // fading element id
									containerHoverID: 'toTopHover', // fading element hover id
									scrollSpeed: 1200,
									easingType: 'linear' 
						 		};
								*/
								
								$().UItoTop({ easingType: 'easeOutQuart' });
								
							});
						</script>
				    <a href="#move-top" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"> </span></a>
				</div>
			</div>
			<!----//End-copy-right---->
		<!----//End-wrap---->
	</body>
</html>

